<!--
 * @FileDescription 输入设置
 * @Author 杨宇翔
 * @Date 20220530 20:03:24
 * @LastEditors 杨宇翔
 * @LastEditTime 20220530 20:03:24
-->
<template>
    <span>输入设置</span>
    <div class="container">
        <label for="应用界面设置 - 输入设置 - 速度">
            <span class="fs16 colorblack">车辆速度({{ speedConfiguration.Speed }}m/s)</span>
        </label>
        <input type="range" name="应用界面设置" id="应用界面设置 - 输入设置 - 速度" step="0.02" min="0" max="163.8"
            @change="SpeedComponent.Default.SetSpeedAsync(speedConfiguration.Direction, speedConfiguration.Speed)"
            v-model="speedConfiguration.Speed">
        <label for="应用界面设置 - 输入设置 - 偏航角速度">
            <span class="fs16 colorblack">偏航角速度({{ rateConfiguration.Speed }}deg/s)</span>
        </label>
        <input type="range" name="应用界面设置" id="应用界面设置 - 输入设置 - 偏航角速度" step="0.01" min="-327.68" max="327.68"
            @change="RateComponent.Default.SetRateAsync(rateConfiguration.Speed)" v-model="rateConfiguration.Speed">
    </div>
</template>

<script setup lang="ts">
import { ClientMessage } from '@runtime/generate/message/ClientMessage';
import { computed, onMounted, reactive, UnwrapNestedRefs } from 'vue';
import { RateComponent, SpeedComponent } from './LidarComponent';

const speedConfiguration: UnwrapNestedRefs<ClientMessage.MillimeterWaveRadarSpeedConfiguration> = reactive(new ClientMessage.MillimeterWaveRadarSpeedConfiguration(1, 0));

const rateConfiguration: UnwrapNestedRefs<ClientMessage.MillimeterWaveRadarRateConfiguration> = reactive(new ClientMessage.MillimeterWaveRadarRateConfiguration(0));

const speedPercent = computed(() => `${speedConfiguration.Speed / 163.8 * 100}% 100%`);
const ratePercent = computed(() => `${rateConfiguration.Speed / (327.68 * 2) * 100 + 50}% 100%`);

onMounted(async () => {
    await SpeedComponent.Default.SetSpeedAsync(speedConfiguration.Direction, speedConfiguration.Speed);
    await RateComponent.Default.SetRateAsync(rateConfiguration.Speed);
});
</script>

<style scoped>
span:not(label>span) {
    display: inline-block;
    width: calc(100% - 0.6rem);
    height: 5rem;

    margin-top: 2rem;
    margin-left: 0.6rem;
    padding-left: 1.4rem;

    color: #B1B1D4;
    font-size: 1.8rem;
    line-height: 5rem;

    border-bottom: solid 0.1rem #1F1F2D;
}

.container {
    padding-top: 1rem;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    padding-bottom: 2rem;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 2rem;
}

label {
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
}

label>span {
    color: #81859C;
    font-size: 1.4rem;
}

input:first-of-type {
    background-size: v-bind(speedPercent);
}

input:last-of-type {
    background-size: v-bind(ratePercent);
}

input {
    width: 100%;
    height: 0.6rem;

    margin-bottom: 1rem;

    border-radius: 0.3rem;

    background: linear-gradient(90deg, #807DE1 0%, #218CDE 100%) #B1B1D41A;
    background-repeat: no-repeat;

    appearance: none;
}

input::-webkit-slider-thumb {
    appearance: none;

    position: relative;
    width: 2rem;
    height: 2rem;

    border-radius: 50%;
    background: linear-gradient(180deg, #807DE1 0%, #218CDE 100%);

    cursor: pointer;
}
</style>./LidarComponent